import React from 'react'

import './index.scss'
// 引入head组件
import Head from 'next/head'

// 顶部导航
import TopNavigation from '../../components/topNavigation'
// banner
import Banner from '../../components/banner'
// nav
import ServiceNav from './serviceNav'
// 分类详情
import ServiceInfo from './serviceInfo'
// 优势
import ServiceAdvantage from "./serviceAdvantage";
// 开发流程
import ServiceProcess from './serviceProcess'
// 右侧导航
import Navigation from '../../components/navigation'
// 底部footer
import Footer from '../../components/footer'

// api请求
import
{
    getHeadAndTailData
}
    from '../../api/api'

// redux 数据
import store from '../../store'

export default class Service extends React.Component{
    constructor(props) {
        super(props)
        let {remUrl} = store.getState()
        this.state = {
            // 控制右侧侧边栏展示隐藏
            displayNav: false,
            remUrl,
            navFrag:true,
        }
    }
    static async  getInitialProps(){
        // 底部数据
        let footerData = await getHeadAndTailData()
        return{
            footerData: footerData.data
        }
    }
    render(){
        return(
            <>
                <Head>
                    <meta charSet='utf-8'/>
                    <title>{this.props.footerData.info.product_title}</title>
                    <meta name="keywords" content={this.props.footerData.info.product_keywords} />
                    <meta name="description" content={this.props.footerData.info.product_description}/>
                    <link rel="icon" href={this.props.footerData.web_icon}/>
                    <script src={this.state.remUrl}></script>
                </Head>

                <div className='service' onClick={this.downDisplayNav.bind(this)}>

                    {/*顶部导航*/}
                    <TopNavigation title={'service'}  changeDisplayNav={this.changeDisplayNav.bind(this)} />
                    {/*banner*/}
                    <Banner type={'service'} />
                    {/*nav栏*/}
                    <ServiceNav />
                    {/*分类详情*/}
                    <ServiceInfo />
                    {/*优势*/}
                    <ServiceAdvantage displayNav={this.state.displayNav} />
                    {/*开发流程*/}
                    <ServiceProcess />
                    {/*右侧导航*/}
                    <Navigation navFrag={this.state.navFrag} displayNav={this.state.displayNav} />
                    {/*底部*/}
                    <Footer footerData={this.props.footerData} />
                </div>
            </>

        )
    }
    downDisplayNav(){
        this.state.displayNav && (
            this.setState({
                displayNav: false
            })
        )
    }
    changeDisplayNav(){
        this.setState({
            displayNav: !this.state.displayNav,
            navFrag: false
        })
    }
}